<template>
<div class="loginPageCls">
  <span style="font-size: 30px;">Edu boss 管理系统</span>
  <el-card class="loginCard" v-loading="$store.state.isShowLoading">
    <h3>登录</h3>
    <login-base
      :ruleForm="ruleForm"
      :rules="rules"
      @submitValidateSuccessNotify="submitForm">
    </login-base>
  </el-card>
  <el-button style="width: 350px;">←回到 用户端</el-button>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { userLogin } from '@/api/login'
export default Vue.extend({
  name: 'loginPage',
  data () {
    return {
      ruleForm: {
        phone: '18201288771',
        password: '111111'
      },
      rules: ['phone', 'password']
    }
  },
  methods: {
    async submitForm () {
      // console.log('提交表单')
      const data = await userLogin(this.ruleForm)
      if (data.state === 1) {
        this.$message({
          message: '登陆成功',
          type: 'success'
        })
        // console.log('query', this.$route.query)
        this.$store.commit('setUserToken', data.content)
        this.$router.push(this.$route.query.redirect as string || '/')
        return
      }
      this.$message({
        message: '登陆失败',
        type: 'error'
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.loginPageCls{
  background-color: #e8eef4;
  color:#999fa5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .loginCard{
    width: 350px;
    min-width: 300px;
    margin: 20px 0;
    .el-form-item{
      margin-bottom: 20px;
    }
  }
}
</style>
